<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" class="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>南航统一收银台</title>
    <script src="asserts/js/jquery-3.6.0.js"></script>
    <script src="asserts/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/cloud.css"/>

    <style>



        .zfb {

            border: 2px solid #adadad59;
            width: 250px;
            height: 60px;
            line-height: 56px;
            text-align: center;
            border-radius: 5px;
            margin: 20px;
        }

        .zfb:hover {
            background: rgba(255, 255, 255, 0.38);
        }

        .navbar-default {
            background-color: #ffffffcf;;
            border-color: #e7e7e7;
        }

        .navbar-default {
            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.45)), to(rgba(255, 255, 255, 0.45)));
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            border-radius: 0px;
            -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 5px rgb(0 0 0 / 8%);
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 5px rgb(0 0 0 / 8%);
        }

        #card1 {
            background-color: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(13px);
            -webkit-backdrop-filter: blur(13px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            color: rgb(255, 255, 255);
            width: 900px;
            margin: 0 auto;
        }

        #wai {
            text-align: center;
        }

        #card2 {
            background-color: rgba(245, 245, 245, 0.58);
            /* backdrop-filter: blur(13px); */
            -webkit-backdrop-filter: blur(13px);
            /* border: 1px solid rgba(255, 255, 255, 0.18); */
            /* box-shadow: rgb(142 142 142 / 19%) 0px 6px 15px 0px; */
            /* -webkit-box-shadow: rgb(142 142 142 / 19%) 0px 6px 15px 0px; */
            border-radius: 5px;
            /* -webkit-border-radius: 7px; */
            /* color: rgb(255, 255, 255); */
            margin: 20px;
            height: 110px;
            text-align: left;
        }
    </style>
</head>

<body id="bodyy">

<!--背景-->
<div>
    <div class="frame">
        <div class="plane-container">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                 y="0px"
                 width="1131.53px" height="379.304px" viewBox="0 0 1131.53 379.304"
                 enable-background="new 0 0 1131.53 379.304"
                 xml:space="preserve" class="plane">
                    <polygon fill="#D8D8D8"
                             points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  "/>
                <polygon fill="#C4C4C3" points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   "/>
            </svg>

        </div>
    </div>
    <div class="clouds">

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud big front slowest">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant smaller">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud small slow">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant super-slow massive">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud slower">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

    </div>

</div>

<!--导航栏-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img id="logoo" style="margin-left: 30px;height: 30px;width: auto;margin-top: 10px;" src="asserts/img/logo.png"/>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a style="margin-left: 40px;box-shadow: 0 3px 9px rgb(0 0 0 / 8%);    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);" href="#">购票<span class="sr-only">(current)</span></a></li>
                <li><a href="return.html">购票记录</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="weather" href="#">天气</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" id="namee">{用户名}<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人信息</a></li>
                        <li><a id="signOutBtn" class="nav-link"  href="#">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="wai">
    <div id="card1">

        <div id="card2">

            <div class="row">
                <div style="float: left;margin-top: 31px;margin-left: 45px;">
                    <img id="ztimg" src="asserts/img/duihao.png" style="width: 45px;height: 45px;">
                </div>

                <div style="float: left;margin-left: 32px;margin-top: 26px;">
                    <b id="title" style="color: #000; font-size: 15px;">加载中，请稍等。</b>
                    <p></p>
                    <b style="color: #000; font-size: 15px;">金额：</b><b id="cost" style="color: #f5590a;font-size: 20px">加载中</b>
                </div>
            </div>

        </div>

        <div style="text-align: left;margin-left: 20px;">

            <b style="color: #000; font-size: 15px;">请选择支付方式</b>
        </div>

        <div class="zfb" id="zfb" style="pointer-events: none">
            <img src="asserts/img/zfbx.png" style="width: 110px;height: auto;">
            <img src="asserts/img/tj.png" style="width: 33px; height: auto;margin-left: 25px">
        </div>

        <form action="/aliPay" enctype="multipart/form-data"  method="get" id="alipay">
            <input id="orderId" name="orderId" value="" type="hidden">
            <input id="userId" name="userId" value="" type="hidden">
        </form>
    </div>

</div>

<script>
    $(document).ready(function () {

        $.ajax({
            url: "/getName",
            type: "get",
            dataType: "json",
            success: function (data) {
                if (data.success){
                    loginFlag=1;
                    $("#namee").text(data.data);
                }else{
                    $("#namee").text("未登录");
                        location.href="login.html";
                }
            }
        })

        var pathName=window.document.location.pathname;
        var curWwwPath=window.document.location.href;
        var pos=curWwwPath.indexOf(pathName);
        var prefixUrl=curWwwPath.substring(0,pos);
        console.log("prefixUrl:"+prefixUrl);

        var orderId=getQueryVariable("orderId");

        $.ajax({
            url:prefixUrl+"/getOrder?orderId="+orderId,
            type: "GET",
            dataType: "json",
            success:function (data) {
                console.log(data);
                if (data.success){
                    data.data;
                    $("#title").text("您的订单已提交成功！请尽快付款");
                    $("#cost").text("￥ "+data.data.cost+".0");
                    $("#orderId").val(data.data.id);
                    $("#zfb").attr("style","pointer-events: auto");
                    $("#userId").val(data.data.userId);
                }else{
                    $("#ztimg").attr("src","asserts/img/wrong.png");
                    $("#title").text("订单提交错误，请重试.");
                    $("#bodyy").attr("style","background-color:#f49867;")
                    $("#logoo").attr("src","asserts/img/logo_w.png");
                    $("#zfb").attr("style","pointer-events: none");
                }
            },
            error:function () {
                $("#ztimg").attr("src","asserts/img/wrong.png");
                $("#title").text("网络异常");
                $("#bodyy").attr("style","background-color:#f49867;")
                $("#logoo").attr("src","asserts/img/logo_w.png");
                $("#cost").text("￥0.0");
                $("#zfb").attr("style","pointer-events: none");
            }
        })


        $("#signOutBtn").click(function () {
            signOut();
            return;//终止a标签默认行为
        });

        function signOut() {
            $.ajax({
                url:prefixUrl+"/signOut",
                type: "POST",
                success:function (data) {
                    location.href="login.html";
                }
            })
        }

        // $.ajax({
        //     url: "https://devapi.qweather.com/v7/weather/now?location=6&key=a91212c50f7041b9a9c68ea15874dbcc",
        //     type: "get",
        //     dataType: "json",
        //     success: function (data) {
        //         console.log(data);
        //         let location = data.HeWeather6[0].basic.location;
        //         let condTxt = data.HeWeather6[0].now.cond_txt;
        //         let tmp = data.HeWeather6[0].now.tmp;
        //
        //         console.log(location);
        //         console.log(condTxt);
        //         console.log(tmp);
        //         var text = location +" "+ condTxt+" " + tmp +"℃";
        //         $("weather").html(text);
        //     }
        // });

        $("#zfb").click(function () {
        console.log("支付宝支付");
            $("#alipay").submit();
        })
    })

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
</script>

</body>

</html>